<template>
	<div class="calendar">
		<template v-if="calendarInfo.is_always == 1&&days.length>0">
			<div class="calendar__block">
				<div class="header">
					<div class="title">选择预约日期</div>
					<div class="date">{{selectedDate}}</div>
				</div>
				<ul class="weekdays">
					<li>
						<p>一</p>
						<small>MON</small>
					</li>
					<li>
						<p>二</p>
						<small>TUE</small>
					</li>
					<li>
						<p>三</p>
						<small>WED</small>
					</li>
					<li>
						<p>四</p>
						<small>THU</small>
					</li>
					<li>
						<p>五</p>
						<small>FRI</small>
					</li>
					<li>
						<p>六</p>
						<small>SAT</small>
					</li>
					<li>
						<p>日</p>
						<small>SUN</small>
					</li>
				</ul>
				<ul class="days">
					<li v-for="(dayobj,index) in days"
						:class="{'disabled': dayobj.type == '','full':dayobj.type == -2,'closed':dayobj.type == -1,'today':isToday(dayobj.day),'active':isDayActive(index,dayobj)}"
						@click="selectDay(index,dayobj)" :key="index">
						<div class="date">{{ dayobj.day.getDate() }}</div>
						<!-- 显示余票数量 -->
						<!-- <p class="small" v-if="dayobj.type != '' && dayobj.type >= 0">余{{dayobj.yy_date.tp_last_stock_sum}}</p> -->
						<!-- 显示有票字样 -->
						<p class="small" v-if="dayobj.type != '' && dayobj.type >= 0">有票</p>
						<!-- 显示今天字样 -->
						<!-- <p class="small" v-if="dayobj.type != '' && isToday(dayobj.day)">今天</p> -->
						<!--                    <p class="small" v-if="dayobj.type == ''">不可预约</p>-->
						<p class="small" v-if="dayobj.type == -2">无票</p>
						<!-- 可设置特定日期文案 -->
						<p class="small" v-if="dayobj.type == -1">
							{{isToday(dayobj.day,new Date('2019/07/01'))?'免预约':'闭馆'}}
						</p>
					</li>
				</ul>
			</div>
			<div class="calendar__block">
				<div class="header">
					<div class="title">选择场次</div>
				</div>
				<ul class="times" v-if="tpList.length > 0">
					<li v-for="(item,index) in tpList"
						:class="{'active':isTimeActive(item),'disabled':item.tp_last_stock == 0}"
						@click="selectTime(item)" :key="index">
						<div class="tp_tit" v-if="calendarInfo.is_always==1">{{item.time_period_show}}</div>
						<div class="tp_tit" v-if="calendarInfo.is_always==0">
							{{item.active_start_time}}-{{item.active_end_time}}
						</div>
						<!-- 显示有票 -->
						<p class="small">{{item.tp_last_stock?'余：'+item.tp_last_stock:'无票'}}</p>
					</li>
				</ul>
			</div>
		</template>


		<!-- 短期活动列表显示 -->
		<div class="short_term_box" v-if="calendarInfo.is_always == 0&&calendarInfo.list.length>0">
			<div class="titles">预约日期</div>
			<div class="ul_box">
				<div class="li_box" :class="{'disable':t.active_status != 1,'active':t.active_time_id == tpSelectId}"
					v-for="(t,i) in calendarInfo.list" :key="i" @click="carry(t)">
					<div class="lefts">
						<template v-if="t.active_status == 1">
							<van-icon name="checked" v-if="t.active_time_id == tpSelectId" />
							<van-icon name="circle" v-else />
						</template>
						<template v-else>
							<van-icon name="circle" />
						</template>
						{{t.date}}
					</div>
					<div class="rights">
						{{t.active_status_show}}
					</div>
				</div>
			</div>
		</div>


		<div class="calendar__block">
			<div class="header">
				<div class="title">预约活动</div>
			</div>
			<ul class="tickets" v-if="price_collect.length">
				<li v-for="(item,index) in price_collect" :key="index">
					<label>
						<span class="name">{{item.name}}：</span>
						<span class="price">¥ {{item.price}}</span>
					</label>
					<div class="inputbox">
						<span :class="{'active':item.value>0}" @click="jian_fn(index,item.value,item.min)">-</span>
						<input type="number" v-model="item.value" placeholder="" @blur="blur_fn(index,item.value)">
						<span :class="{'active':item.value<item.max}"
							@click="plus_fn(index,item.value,item.max)">+</span>
					</div>
				</li>
				<li class="tips" v-if="calendarInfo.wxts">{{calendarInfo.wxts}}</li>
			</ul>
		</div>
	</div>
</template>
<script>
	/**
	 * @Author   yutang8215
	 * @DateTime 2019-01-20
	 */
	import {
		Session,
		datefmt
	} from '@/assets/js/utils.js';
	//
	// const TD_ID = 'active_id'; //日期id
	const TD_TP_ID = 'active_time_id'; //日期对应的时段id

	export default {
		data() {
			return {
				selectedDate: '', //显示已选日期
				days: [], //日历
				tdIndex: 0, // Session.get('hbmb_person__pw__td_index')已选日期索引（无默认值，避免为0时走默认），已选高亮
				tdSelectId: '', // Session.get('hbmb_person__pw__td_id')已选日期id，回显塞入对应时段
				tpList: [], //Session.get('hbmb_person__pw__td_tp_list') ||  存入缓存防止刷新已选时段数据丢失！！！！配合初始化判断一同使用
				tpSelectId: '', //Session.get('hbmb_person__pw__td_tp_id')已选时段id
				price_collect: [],
				select_num: 0,
				price_total: 0,
				TD_ID: 'ad_id', //日期id
				// TD_TP_ID: 'active_time_id', //日期对应的时段id
			}
		},
		props: {
			calendarInfo: {
				type: Object,
				default: {}
			},
			asyncChoose: {
				type: Boolean,
				default: false
			},
		},
		created() {
			if (this.calendarInfo.is_always == 1 && this.calendarInfo.yy_date.length > 0) {
				this.initChooseDate();
				this.initCalendarData();
			}
			this.price_collect = this.calendarInfo.price_collect;
			if (!this.calendarInfo.price_collect.length) return;
			this.price_collect.map(item => {
				item.value = 0;
				item.min = 0;
				item.max = 1000
			})
		},
		methods: {
			/**
			 * @日历渲染
			 */
			initCalendarData: function() {
				let _this = this;
				let calendar = _this.calendarInfo;
				if (_this.calendarInfo.is_always === 1) {
					_this.TD_ID = 'ad_id';
				} else if (_this.calendarInfo.is_always === 0) {
					_this.TD_ID = 'active_id';
				}
				// console.log(this.price_collect)
				let yy_date = calendar.yy_date;
				//获取可预约的第一天的日期
				let firstDate = new Date(yy_date[0].t_date.replace(/-/g, "/"))
				let firstWeek = firstDate.getDay(); //获取可预约的第一天是星期几
				if (firstWeek == 0) {
					firstWeek = 7; //周日返回‘0’ 放在第七位
				}
				let firstParse = Date.parse(firstDate) //第一天的时间戳

				//获取可预约的最后一天的日期
				let lastDate = new Date(yy_date[yy_date.length - 1].t_date.replace(/-/g, "/"))
				let lastWeek = lastDate.getDay(); //获取可预约的最后一天是星期几
				if (lastWeek == 0) {
					lastWeek = 7; //周日返回‘0’ 放在第七位
				}
				let lastParse = Date.parse(lastDate) //最后一天的时间戳
				//补齐可预约的第一天之前的日子
				for (let i = firstWeek - 1; i > 0; i--) {
					let d = new Date(firstParse - 86400000 * i);
					let dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
					dayobject.day = d;
					dayobject.type = _this.setDateType(d);
					dayobject.yy_date = {};
					_this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
				}

				//可预约的第一天到可预约最后一天
				let interval2 = Math.floor((lastParse - firstParse) / 86400000)
				for (let i = 0; i <= interval2; i++) {
					let d = new Date(firstParse + 86400000 * i);
					let dayobject = {};
					dayobject.day = d;
					dayobject.type = _this.setDateType(d);
					dayobject.yy_date = {};
					_this.days.push(dayobject);
				}

				//补齐可预约最后一天之后的日子
				for (let i = 1; i <= 7 - lastWeek; i++) {
					let d = new Date(lastParse + 86400000 * i);
					let dayobject = {};
					dayobject.day = d;
					dayobject.type = _this.setDateType(d);
					dayobject.yy_date = {};
					_this.days.push(dayobject);
				}

				//可预约日期添加具体数据
				for (let m = 0; m < _this.days.length; m++) {
					let date = datefmt(_this.days[m].day, 'YYYY-MM-DD')
					yy_date.forEach(function(item) {
						if (item.t_date == date) {
							_this.days[m].yy_date = item;
						}
					})
				}
				//---------------------------------------------------------------------------
				//初始化时间段
				// console.log(!!_this.tdSelectId, _this.tdSelectId)
				if (!!_this.tdSelectId) {
					let activeDate = yy_date.find(o => o[_this.TD_ID] == _this.tdSelectId);
					if (activeDate) {
						_this.tpList = activeDate.tp;
					} else {
						//回显时若无票，则清空且时段恢复默认
						_this.selectDayDisActive();
					}
				} else {
					_this.tpList = yy_date[0].tp;
				}
			},
			/**
			 * @判断可预约的日期
			 * dateType -1闭馆，-2已满，为空禁选
			 */
			setDateType: function(d) {
				let _this = this;
				let dateType = '';
				let dateFlag = false;
				let date = datefmt(d, 'YYYY-MM-DD');
				let closed_date = _this.calendarInfo.closed_date;
				let closed_pre_week = _this.calendarInfo.closed_pre_week;
				let opened_date = _this.calendarInfo.opened_date;
				let yy_date = _this.calendarInfo.yy_date;

				//固定闭馆日（周几闭馆）
				let closedWeek = d.getDay();
				if (closedWeek == 0) {
					closedWeek = 7;
				}
				closed_pre_week.forEach(function(item, index) {
					if (closedWeek == item) {
						dateFlag = true
						dateType = -1
					}
				})

				// 特殊闭馆日
				closed_date.forEach(function(item, index) {
					if (item == date) {
						dateFlag = true
						dateType = -1
					}
				})

				// 特殊开馆日
				opened_date.forEach(function(item, index) {
					if (item == date) {
						dateFlag = true;
						dateType = -1;
					}
				})
				var endIndex = yy_date.findIndex((item) => {
					return item.tp_last_stock_sum > 0
				})
				//可预约日期
				yy_date.forEach(function(item, index) {
					// yy_date[yy_date.length-1].t_date
					if (item.t_date == date) {
						const endTime = yy_date[endIndex > -1 ? endIndex : 0].t_date; //结束日期
						const nowTime = datefmt(new Date(), 'YYYY-MM-DD'); //当前时间
						const startTime = _this.getAddTime(nowTime, 0, 0, 14); //延后14天作为起始日期
						const dateRangeDisabled = _this.compareTime(startTime, endTime, item.t_date); //Boolean
						if (item.tp_last_stock_sum == 0) {
							if (dateRangeDisabled) {
								//指定时间段内不可预约
								dateFlag = false;
							} else {
								//常规预约已满
								dateFlag = true;
								dateType = -2;
							}
						} else {
							dateFlag = true;
							dateType = item[_this.TD_ID];
						}
					}
				})
				// console.log(date,endIndex,dateFlag)
				return dateFlag ? dateType : ''; //为空即不可预约
			},
			/**
			 * @初始化选择日期
			 */
			initChooseDate: function() {
				let _this = this;
				let choseDate = ''; //Session.get('hbmb_person__pw__td_txt') || 已选日期字符串
				let year = choseDate.substring(0, 4) || new Date().getFullYear();
				let month = choseDate.substring(5, 7) || (new Date().getMonth() + 1);
				_this.selectedDate = _this.dateJoin(year, month);
			},
			/**
			 * stime 开始时间 etime 结束时间
			 */
			compareTime(stime, etime, curtime) {
				// 转换时间格式，并转换为时间戳
				function tranDate(time) {
					return new Date(time.replace(/-/g, '/')).getTime();
				}

				let thisDate = typeof curtime === 'string' ? new Date(curtime.replace(/-/g, '/')) : curtime;
				// 开始时间
				let startTime = tranDate(stime);
				// 结束时间
				let endTime = tranDate(etime);
				// 获取当前时间
				let currentTime = thisDate.getFullYear() + '-' + (thisDate.getMonth() + 1) + '-' + thisDate.getDate();
				let nowTime = tranDate(currentTime);
				// 如果当前时间处于时间段内，返回true，否则返回false
				if (nowTime < startTime || nowTime > endTime) {
					return false;
				}
				return true;
			},
			/**
			 * @增加指定日期
			 */
			getAddTime(date, y, m, d) {
				//补零操作
				function getzf(num) {
					return parseInt(num) < 10 ? (num = '0' + num) : num;
				}

				if (date == "" || date == null) {
					return "";
				} else {
					var s = date.split("-");
					var yy = parseInt(s[0]);
					var mm = parseInt(s[1] - 1);
					var dd = parseInt(s[2]);
					var dt = new Date(yy, mm, dd);
					dt.setFullYear(dt.getFullYear() + y); //增加n个月
					dt.setMonth(dt.getMonth() + m); //增加n个月
					dt.setDate(dt.getDate() + d); //减少1天
					if ((dt.getYear() * 12 + dt.getMonth()) > (yy * 12 + mm + m)) {
						dt = new Date(dt.getFullYear(), dt.getMonth(), 0);
					}
					var year = dt.getFullYear();
					var month = dt.getMonth() + 1;
					var days = dt.getDate();
					var dd = year + "-" + getzf(month) + "-" + getzf(days);
					return dd;
				}
			},
			/**
			 * @param    date        [循环出的单个日期]
			 * @param    specialDate [指定的特殊日期]
			 * @return               [日期比对是否相等]
			 */
			isToday: function(date, specialDate) {
				let customDate = specialDate ? new Date(specialDate) : new Date();
				return date.getFullYear() == customDate.getFullYear() && date.getMonth() == customDate.getMonth() &&
					date.getDate() == customDate.getDate();
			},
			/**
			 * @日期选中高亮
			 */
			isDayActive: function(index, dayobj) {
				let _this = this;
				if (_this.tdIndex == index) {
					if (dayobj.type != '' && dayobj.type >= 0) {
						return true;
					} else {
						//有且仅当用户已选择但在回显时无票则应清除数据
						//
						_this.selectDayDisActive();
						//
						// if (Session.get('hbmb_person__pw__users_info')) {
						//     Session.remove('hbmb_person__pw__users_info');
						// }

						return false;
					}
				}
			},
			/**
			 * @时段选中高亮
			 */
			isTimeActive: function(item) {
				let _this = this;
				if (_this.tpSelectId == item[TD_TP_ID]) {
					if (item.tp_last_stock > 0) {
						return true;
					} else {
						//有且仅当用户已选择但在回显时无票则应清除数据
						//
						_this.selectTimeDisActive();
						//
						return false;
					}
				}
			},
			/**
			 * @获取选中的日期
			 * @param   index   [当前选中日期索引]
			 * @param   type    [当前选中日期类型]
			 * @param   date    [当前选中日期]
			 * @param   yy_date [当前选中日期信息（包含时段）]
			 */
			selectDay: function(index, dayobj) {
				let _this = this;
				if (dayobj.type != '' && dayobj.type >= 0) {
					//有票时
					if (_this.tdIndex == index) {
						_this.selectDayDisActive();
					} else {
						_this.selectDayActive(index, dayobj);
					}
				} else {
					_this.$emit('chooseDisabled');
				}
			},
			//日期选中
			selectDayActive: function(index, dayobj) {
				let _this = this;
				_this.tdIndex = index;
				_this.tdSelectId = dayobj.yy_date[_this.TD_ID];
				_this.tpList = dayobj.yy_date.tp;
				_this.selectedDate = _this.dateJoin(dayobj.day.getFullYear(), dayobj.day.getMonth() + 1); //选择当前日期
				_this.$emit('tdSelectId', _this.tdSelectId);
				// let td_txt = datefmt(dayobj.day, 'YYYY年MM月DD日');
				// Session.set('hbmb_person__pw__td_txt', td_txt); //缓存日期待填写参观页使用
				// Session.set('hbmb_person__pw__td_id', _this.tdSelectId); //缓存日期id，回显时给当前已选日期、时段重新赋值
				// Session.set('hbmb_person__pw__td_index', _this.tdIndex); //已选日期索引，高亮
				// Session.set('hbmb_person__pw__td_tp_list', _this.tpList); //缓存当前已选日期对应的时段，回显时给对应时段的重新赋值//存入缓存防止刷新已选时段数据丢失！！！！配合初始化判断一同使用
				_this.initChooseDate();
				//当时段已选择，重选日期须清空时段
				if (_this.tpSelectId) {
					_this.selectTimeDisActive();
				}
			},
			//日期取消选中
			selectDayDisActive: function() {
				let _this = this;
				_this.tdIndex = null;
				_this.tdSelectId = null;
				_this.tpList = _this.calendarInfo.yy_date[0].tp;
				_this.$emit('tdSelectId', '');
				// Session.remove('hbmb_person__pw__td_id');
				// Session.remove('hbmb_person__pw__td_txt');
				// Session.remove('hbmb_person__pw__td_index');
				// Session.remove('hbmb_person__pw__td_tp_list');
				//
				_this.initChooseDate();
				//当时段已选择，重选日期须清空时段
				if (_this.tpSelectId) {
					_this.selectTimeDisActive();
				}
			},
			/**
			 * @获取选中的时间段
			 * @param     td_tp_id       [所选时段id]
			 * @param     tp_last_stock  [所选时段票量]
			 */
			selectTime: function(item) {
				let _this = this;
				if (item.tp_last_stock != 0) {
					if (_this.tpSelectId == item[TD_TP_ID]) {
						_this.selectTimeDisActive(item);
					} else {
						if (_this.asyncChoose) {
							_this.$emit('chooseTimePeriod', {
								instance: _this,
								item
							});
						} else {
							_this.selectTimeActive(item);
							_this.$emit('chooseTimePeriod', item[TD_TP_ID]);
						}
						console.log(item)
						_this.price_collect.map(i => {
							i.value = 0;
							i.min = 0;
							i.max = item.tp_last_stock
						})
						console.log(_this.price_collect)
					}
				} else {
					_this.$emit('chooseDisabled');
				}
			},
			//时段选中
			selectTimeActive: function(item) {
				let _this = this;
				_this.tpSelectId = item[TD_TP_ID];
				// Session.set('hbmb_person__pw__td_tp_id', item[TD_TP_ID]); //时段id
				// Session.set('hbmb_person__pw__td_tp_txt', item.time_period_show); //缓存时段文案
			},
			//时段取消选中
			selectTimeDisActive: function() {
				let _this = this;
				_this.tpSelectId = null;
				_this.$emit('chooseTimePeriod', '');
				// Session.remove('hbmb_person__pw__td_tp_id'); //时段id
				// Session.remove('hbmb_person__pw__td_tp_txt'); //缓存时段文案
			},
			/**
			 * @日期拼接
			 */
			dateJoin: function(year, month) {
				month = parseInt(month);
				month = month < 10 ? "0" + month : month;
				return year + "." + month
			},
			// 减法
			jian_fn(index, value, min) {
				value = Number(value);
				min = Number(min)
				if (!value) return;
				if (value > min) {
					this.$delete(this.price_collect[index], 'value');
					this.$set(this.price_collect[index], 'value', value - 1);
				}
				this.totalPrice();
			},
			// 加法
			plus_fn(index, value = 0, max) {
				value = Number(value);
				max = Number(max);
				if (value < max) {
					this.$delete(this.price_collect[index], 'value');
					this.$set(this.price_collect[index], 'value', value + 1);
				}
				this.totalPrice();
			},
			// 失去焦点时
			blur_fn(index, value) {
				var reg = /^[+]{0,1}(\d+)$/
				if (this.price_collect[index].value == '' || !reg.test(value)) {
					this.$delete(this.price_collect[index], 'value');
					this.price_collect[index].value = 0
				}
				this.totalPrice();
			},
			// 计算总价格
			totalPrice() {
				this.select_num = 0;
				this.price_total = 0;
				for (var i in this.price_collect) {
					this.price_total += this.price_collect[i].price * this.price_collect[i].value;
					this.select_num += this.price_collect[i].value;
				}
				this.$emit('priceTotal', this.price_total.toFixed(2), this.select_num, this.price_collect);
			},
			//选中切换日期场次id  短期活动
			carry(item) {
				if (item.active_status != 1) return
				let {
					tpSelectId
				} = this;
				if (tpSelectId == item.active_time_id) {
					this.tpSelectId = '';
					this.$emit('chooseTimePeriod', '');
				} else {
					this.tpSelectId = item.active_time_id;
					this.$emit('chooseTimePeriod', {
						item,
					});
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.calendar {
		margin-top: 20px;

		&__block {
			overflow: hidden;
			background: #fff;
			padding: 36px 30px;
			border-radius: 24px;
			margin-top: 20px;
			/*& + & {*/
			/*    margin-top: 20px;*/
			/*}*/

			.header {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-bottom: 30px;

				.title {
					font-size: 30px;
					font-weight: bold;
					color: #353535;
				}

				.date {
					font-size: 32px;
					font-weight: 400;
					color: #353535;
				}
			}

			ul.weekdays {
				font-size: 0;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;

				li {
					width: calc(100% / 7 - 12px);
					text-align: center;
					display: inline-block;
					padding: 10px 0;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					color: #fff;
					font-weight: 500;
					background-color: $calendarWeekColor;
					border-radius: 8px;

					p {
						margin-bottom: 4px;
						font-size: 30px;
					}

					small {
						font-size: 16px;
						/*px*/
					}
				}
			}

			ul.tickets {
				li {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 48px;

					label {
						.name {
							color: $fzColor;
							font-size: 30px;
						}

						.price {
							color: $priceColor;
							font-size: 30px;
						}
					}

					.inputbox {
						display: flex;
						align-items: center;

						span {
							width: 48px;
							height: 48px;
							border: 2px solid #E5E5E5;
							border-radius: 50%;
							line-height: 40px;
							text-align: center;
							font-size: 40px;
							color: #B1B2B4;

							&.active {
								color: $calendarWeekColor;
							}
						}

						input {
							border: 0;
							width: 60px;
							height: 48px;
							flex-shrink: 0;
							outline: none;
							font-size: 30px;
							color: $fzColor;
							text-align: center;
						}
					}

					&.tips {
						font-size: 24px;
						color: #646464;
						line-height: 36px;
						margin: 0;
					}
				}
			}

			// 日历
			.days {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				li {
					width: calc(100% / 7 - 6px);
					min-height: 90px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					color: #353535;
					font-size: 30px;
					text-align: center;
					border-radius: 8px;
					overflow: hidden;
					border: 2px solid $calendarBorder;
					/* px */
					background-color: $calendarDateColor;
					transition: all 0.2s ease-in-out 0s;

					&:nth-of-type(n+8) {
						margin-top: 20px;
					}

					.date {
						font-size: 30px;
					}

					.small {
						font-size: 22px;
						color: $calendarHasTicket;
						white-space: nowrap;
						-webkit-transform: scale(0.8);
					}

					// 当日
					&.today {
						opacity: 1;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							display: block;
							width: 25px;
							height: 25px;
							top: 0;
							right: 4px;
							color: #fff;
							font-size: 16px;
							background-color: $calendarHasTicket;
							z-index: 20;
							background: url('#{$baseImgUrl}img/01.png') center center / 100% 100% no-repeat;
						}

						.small {
							color: $calendarHasTicket;
						}
					}

					//点击高亮
					&.active {
						color: #fff;
						background-color: $calendarDateColorActive;
						border: 2px solid $calendarDateColorActive;

						.small {
							color: #fff;
						}

						&::after {
							content: '';
							position: absolute;
							display: block;
							width: 40px;
							height: 40px;
							bottom: 0;
							right: 0;
							color: #fff;
							font-size: 16px;
							background-color: #F17F2A;
							z-index: 20;
							background: url('#{$baseImgUrl}img/selected.png') center center / 100% 100% no-repeat;
						}
					}

					//不可预约
					&.disabled {
						color: #D5D5DD;
						/*opacity: .5;*/
						cursor: not-allowed;
						border: 2px solid $calendarBorder;
						/* px */
						background-color: #fff;

						.small {
							color: #353535;
						}
					}

					//已满
					&.full {
						color: #353535;
						cursor: not-allowed;
						border: 2px solid $calendarBorder;
						background-color: #fff;

						.small {
							color: #353535;
						}
					}

					//闭馆
					&.closed {
						color: #353535;
						cursor: not-allowed;
						background-color: #fff;
						border: 2px solid #AAAAAA;
						opacity: .5;

						.small {
							font-size: 12px;
							color: #353535;
						}
					}
				}
			}
		}

		//短期活动
		.short_term_box {
			background-color: #fff;
			border-radius: 24px;
			margin-top: 20px;
			padding: 25px 28px;
			font-size: 30px;

			.titles {
				color: #353535;
				font-weight: 700;
				text-align: left;
			}

			.ul_box {

				.li_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 24px 0;
					color: #323232;

					&.disable {
						color: #969696;

						.lefts {
							.van-icon {
								color: #969696;
							}
						}

						.rights {
							background-color: #B1B2B4;
						}
					}

					&.active {
						.lefts {
							.van-icon {
								color: #F17F2A;
							}
						}
					}

					.lefts {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.van-icon {
							margin-right: 10px;
							color: #F17F2A;
						}
					}

					.rights {
						font-size: 26px;
						flex-shrink: 0;
						background-color: #F17F2A;
						line-height: 48px;
						border-radius: 40px;
						padding: 0 35px;
						color: #ffffff;
						letter-spacing: 3px;
					}
				}
			}
		}

		// 时段
		.times {
			width: 100%;
			max-width: 750px;
			display: flex;
			/*flex-wrap: wrap;*/
			/*justify-content: space-between;*/
			overflow-x: auto;

			&::after {
				content: '';
				width: 32%;
			}

			li {
				position: relative;
				padding: 10px 0;
				/*width: 32%;*/
				width: 250px;
				flex-shrink: 0;
				font-size: 32px;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #646464;
				cursor: pointer;
				border-radius: 10px;
				overflow: hidden;
				background-color: $calendarTime;
				margin-right: 60px;


				&:nth-of-type(n+4) {
					/*margin-top: 10px;*/
				}

				.tp_tit {
					font-size: 32px;
				}

				.small {
					font-size: 22px;
					/*      color: $baseClr;*/
					white-space: nowrap;
					-webkit-transform: scale(0.9);
				}

				&.active {
					color: #fff;
					/*border: 1px solid #fff;*/
					background-color: $calendarDateColorActive;
					/*     border: 1px solid $baseClr;
/*     background-color: $baseClr;*!*/

					&::after {
						content: '';
						position: absolute;
						display: block;
						width: 52px;
						height: 52px;
						bottom: 0;
						right: 0;
						color: #fff;
						font-size: 32px;
						background-color: #d27966;
						z-index: 20;
						background: url('/static/img/active/selected.png') center center / 100% 100% no-repeat;
					}

					.small {
						color: #fff;
					}
				}

				&.disabled {
					opacity: .5;
					cursor: not-allowed;
				}
			}
		}

		/deep/ .van-sticky--fixed {
			.calendar__block {
				margin: 0;
				border-radius: 0;
			}
		}
	}
</style>
